<script setup lang="ts">
import TileItem from '@/components/tiles/item/TileItem.vue'

const props = defineProps({
    // 麻将牌编码
    tiles: { type: Array, required: true },
    transformStyle: {type: String, required: false}
}) 
props.tiles.reverse();
let baseTransformStyle = "rotateX(30deg) rotateZ(180deg)";
</script>

<template>
  <div class="opposite-chi-group" :style="{'transform': props.transformStyle}">
    <template v-for="(value, index) in props.tiles" :key="index">
      <TileItem :code="(value as string)" :transformStyle="baseTransformStyle" :scale="0.7"></TileItem>
    </template>
  </div>
</template>

<style scoped lang="scss">
.opposite-chi-group{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  div:not(:first-child) {
    margin-left: 0.5px;
  }
}
</style>
